<template>
	<view class="content">
		<view class="form-wrap">
			<view class="form-title">征友条件</view>
			<view class="form-item">
				<view class="label">所在地</view>
				<view class="value">
					<picker @change="citySelector" :value="cityIndex" :range="cityList" range-key="label">
						<view>{{cityList[cityIndex].label}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">年龄范围</view>
				<view class="value">
					<picker mode="multiSelector" @columnchange="ageColumnChange" :value="ageIndex" :range="ageList">
						<view v-if="ageIndex[0] != 0 && ageIndex[1] != 0">{{ageList[0][ageIndex[0]]}}~{{ageList[1][ageIndex[1]]}}</view>
						<view v-else>请选择年龄范围</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">身高范围</view>
				<view class="value">
					<picker mode="multiSelector" @columnchange="heightColumnChange" :value="heightIndex" :range="heightList">
						<view v-if="heightIndex[0] != 0 && heightIndex[1] != 0">{{heightList[0][heightIndex[0]]}}~{{heightList[1][heightIndex[1]]}}</view>
						<view v-else>请选择身高范围</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">最低学历</view>
				<view class="value">
					<picker @change="eduSelector" :value="eduIndex" :range="eduList">
						<view>{{eduList[eduIndex]}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">最低收入</view>
				<view class="value">
					<picker @change="incomeSelector" :value="incomeIndex" :range="incomeList">
						<view>{{incomeList[incomeIndex]}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				form: {
					pcode: '',
					min_age: '',
					max_age: '',
					min_height: '',
					max_height: '',
					education: '',
					income: '',
				},
				cityList: [{
					label: '请选择所在地',
					value: ''
				}, {
					label: '全国',
					value: '100000'
				}, {
					label: '北京市',
					value: '110000'
				}, {
					label: '天津市',
					value: '120000'
				}, {
					label: '上海市',
					value: '310000'
				}, {
					label: '重庆市',
					value: '500000'
				}, {
					label: '河北省',
					value: '130000'
				}, {
					label: '山西省',
					value: '140000'
				}, {
					label: '辽宁省',
					value: '210000'
				}, {
					label: '吉林省',
					value: '220000'
				}, {
					label: '黑龙江省',
					value: '230000'
				}, {
					label: '江苏省',
					value: '320000'
				}, {
					label: '浙江省',
					value: '330000'
				}, {
					label: '安徽省',
					value: '340000'
				}, {
					label: '福建省',
					value: '350000'
				}, {
					label: '江西省',
					value: '360000'
				}, {
					label: '山东省',
					value: '370000'
				}, {
					label: '河南省',
					value: '410000'
				}, {
					label: '湖北省',
					value: '420000'
				}, {
					label: '湖南省',
					value: '430000'
				}, {
					label: '广东省',
					value: '440000'
				}, {
					label: '海南省',
					value: '460000'
				}, {
					label: '四川省',
					value: '510000'
				}, {
					label: '贵州省',
					value: '520000'
				}, {
					label: '云南省',
					value: '530000'
				}, {
					label: '陕西省',
					value: '610000'
				}, {
					label: '甘肃省',
					value: '620000'
				}, {
					label: '青海省',
					value: '630000'
				}, {
					label: '内蒙古自治区',
					value: '150000'
				}, {
					label: '广西壮族自治区',
					value: '450000'
				}, {
					label: '西藏自治区',
					value: '540000'
				}, {
					label: '宁夏回族自治区',
					value: '640000'
				}, {
					label: '新疆维吾尔自治区',
					value: '650000'
				}],
				cityIndex: 0,
				ageList: [
					['最小年龄',18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70],
					['最大年龄',18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70]
				],
				ageIndex: [0, 0],
				heightList: [
					['不限',140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200],
					['不限',140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200]
				],
				heightIndex: [0, 0],
				eduList: ['不限', '初中及以下', '高中及中专', '大专', '本科', '硕士及以上'],
				eduIndex: 0,
				incomeList: ['不限', '2000以下', '2000-4000', '4000-6000', '6000-10000', '10000-20000', '20000以上'],
				incomeIndex: 0,
			}
		},
		onLoad(options) {
			this.userInfo = JSON.parse(options.userinfo)
			if (!!this.userInfo.is_request) {
				this.form.pcode = this.userInfo.is_request.pcode;
				for (let i = 0; i < this.cityList.length; i++) {
					if (this.form.pcode == this.cityList[i].value) {
						this.cityIndex = i
					}
				}
				this.form.min_age = this.userInfo.is_request.min_age;
				this.form.max_age = this.userInfo.is_request.max_age;
				for (let j = 0; j < this.ageList[0].length; j++) {
					if (this.form.min_age == this.ageList[0][j]) {
						this.ageIndex[0] = j
					}
					if (this.form.max_age == this.ageList[1][j]) {
						this.ageIndex[1] = j
					}
				}
				this.form.min_height = this.userInfo.is_request.min_height;
				this.form.max_height = this.userInfo.is_request.max_height;
				for (let j = 0; j < this.heightList[0].length; j++) {
					if (this.form.min_height == this.heightList[0][j]) {
						this.heightIndex[0] = j
					}
					if (this.form.max_height == this.heightList[1][j]) {
						this.heightIndex[1] = j
					}
				}
				this.form.education = this.userInfo.is_request.education;
				this.eduIndex = this.form.education;
				this.form.income = this.userInfo.is_request.income;
				this.incomeIndex = this.form.income;
			}
		},
		onReady() {
			
		},
		onNavigationBarButtonTap(e) {
			if (this.form.pcode == '') {
				uni.showToast({
					title: '请选择所在地',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			if (this.form.min_age == '' || this.form.min_age == '最小年龄' || this.form.max_age == '' || this.form.min_age == '最大年龄') {
				uni.showToast({
					title: '请选择年龄范围',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			// if (this.form.min_height == ''  || this.form.max_height == '' ) {
			// 	uni.showToast({
			// 		title: '请选择身高范围',
			// 		position: 'bottom',
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			// if (this.form.education == '' || this.form.education == 0) {
			// 	uni.showToast({
			// 		title: '请选择最低学历',
			// 		position: 'bottom',
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			// if (this.form.income == '' || this.form.income == 0) {
			// 	uni.showToast({
			// 		title: '请选择最低月收入',
			// 		position: 'bottom',
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			uni.showLoading({
				title: '',
			});
			this.form.method = 'V1.UserRequirement';
			this.form.uid = this.userInfo.id;
			this.form.token = this.userInfo.token;
			console.log('征友条件',this.form)
			this.$api.api.ajaxData(this.form, res => {
				uni.hideLoading();
				uni.showToast({
					title: res.msg,
					position: 'bottom',
					icon: 'none'
				});
				if (res.status) {
					uni.$emit('my-page', {
						type: 'update'
					})
					uni.$emit('home-page', {
						type: 'filter',
						filter: this.cityList[this.cityIndex].label
					})
					uni.navigateBack({
						delta: 1
					})
				}
			}, err => {
				uni.hideLoading();
				uni.showToast({
					title: '网络错误，请稍后再试',
					position: 'bottom',
					icon: 'none'
				});
			})
		},
		methods: {
			citySelector: function (e) {
				this.cityIndex = e.target.value
				this.form.pcode = this.cityList[this.cityIndex].value
			},
			ageColumnChange: function(e) {
				this.ageIndex.splice(e.detail.column, 1, e.detail.value)
				switch (e.detail.column) {
					case 0:
						if (this.ageIndex[0] > this.ageIndex[1]) {
							this.ageIndex.splice(1, 1, e.detail.value)
						}
						break;
					case 1:
						if (this.ageIndex[1] < this.ageIndex[0]) {
							this.ageIndex.splice(0, 1, e.detail.value)
						}
						break;
				}
				this.form.min_age = this.ageList[0][this.ageIndex[0]];
				this.form.max_age = this.ageList[1][this.ageIndex[1]];
			},
			heightColumnChange: function(e) {
				this.heightIndex.splice(e.detail.column, 1, e.detail.value)
				switch (e.detail.column) {
					case 0:
						if (this.heightIndex[0] > this.heightIndex[1]) {
							this.heightIndex.splice(1, 1, e.detail.value)
						}
						break;
					case 1:
						if (this.heightIndex[1] < this.heightIndex[0]) {
							this.heightIndex.splice(0, 1, e.detail.value)
						}
						break;
				}
				this.form.min_height = this.heightList[0][this.heightIndex[0]];
				this.form.max_height = this.heightList[1][this.heightIndex[1]];
			},
			eduSelector: function (e) {
				this.eduIndex = e.target.value
				if (this.eduIndex != 0) {
					this.form.education = this.eduIndex
				}
			},
			incomeSelector: function (e) {
				this.incomeIndex = e.target.value
				if (this.incomeIndex != 0) {
					this.form.income = this.incomeIndex
				}
			},
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.form-wrap {
		padding: 0 20rpx;
		background: #fff;
		margin-bottom: 10rpx;
		.form-title {
			font-size: 30rpx;
			color: #333;
			padding: 20rpx 30rpx;
			position: relative;
			&::before {
				content: '';
				display: block;
				width: 10rpx;
				height: 30rpx;
				background-color: $main-color;
				border-radius: 10rpx;
				position: absolute;
				left: -10rpx;
				top: 50%;
				margin-top: -15rpx;
			}
		}
		.form-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 10rpx 20rpx;
			border-top: 1rpx solid $border-light-color;
			.label {
				.title {
					color: #000;
					font-size: 30rpx;
				}
				.tips {
					color: #666;
					font-size: 24rpx;
				}
			}
			.value {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex: 1;
				height: 80rpx;
				color: #888;
				input {
					padding-right: 0;
					text-align: right;
				}
			}
			.uni-icon-arrowright {
				font-size: 24rpx;
				color: #999;
				margin-left: 10rpx;
			}
		}
	}
</style>
